import React, {Component} from 'react';
import {
	Button,
	StyleSheet, Text,
	View
} from 'react-native';

/**
 * @FileName: ComponentLifecycle
 * @Author: mazaiting
 * @Date: 2018/6/13
 * @Description: 组件的声明周期
 */
class ComponentLifecycle extends Component {
	/**
	 * 1. 定义属性的默认值
	 * 调用时使用this.props.value
	 * @type {{value: string}}
	 */
	static defaultProps = {
		value: 'mazaiting'
	};
	
	/**
	 * 2. 构造函数
	 * @param props
	 */
	constructor(props) {
		super(props);
		/**
		 * 初始化状态
		 * @type {{value: string}}
		 */
		this.state = {
			value: 'initial state.'
		}
	}
	
	/**
	 * 3. 挂载组件，该函数在组件的声明周期中只执行一次
	 */
	componentWillMount() {
		console.log('componentWillMount')
	}
	
	/**
	 * 4. 渲染界面
	 */
	render() {
		console.log('render');
		return (
			<View style={styles.container}>
				<Text>属性初始值：{this.props.value} {'\n'} 状态初始值：{this.state.value}</Text>
				<Button
					title={'改变state'}
					onPress={() => {
						this.setState({value: 'changed'})
					}}
				/>
			</View>
		)
	}
	
	/**
	 * 5. 完成组件挂载，该函数在组件的声明周期中只执行一次
	 */
	componentDidMount() {
		console.log('componentDidMount')
	}
	
	/**
	 * 组件渲染完成，接收到新的props时，函数被调用
	 * @param nextProps 新配置
	 */
	componentWillReceiveProps(nextProps) {
		console.log('componentWillReceiveProps：' + nextProps.value)
	}
	
	/**
	 * PureComponent不能重写此方法，只能在Component中重写
	 * 组件接收到新的state或props时，函数被调用
	 * @param nextProps 新的配置
	 * @param nextState 新的状态
	 * @return 是否重新渲染本组件
	 */
	shouldComponentUpdate(nextProps, nextState) {
		console.log('shouldComponentUpdate');
		return true
	}
	
	/**
	 * 准备更新组件
	 * @param nextProps 新配置
	 * @param nextState 新状态
	 */
	componentWillUpdate(nextProps, nextState) {
		console.log('componentWillUpdate')
	}
	
	/**
	 * 组件更新完成
	 * @param prevProps 之前的配置
	 * @param prevState 之前的状态
	 */
	componentDidUpdate(prevProps, prevState) {
		console.log('componentDidUpdate')
	}
	
	/**
	 * 组件被卸载之前调用
	 */
	componentWillUnmount() {
		console.log('componentWillUnmount')
	}
}

/**
 * 样式属性
 */
const styles = StyleSheet.create({
	container: {
		backgroundColor: '#DDD'
	}
});

/**
 * 测试改变ComponentLifecycle组件的props后的回调函数是否执行
 */
class ComponentLifecycleWrapper extends Component {
	state={
		value: 'from parent'
	};
	render() {
		return(
			<View style={styles.container}>
				<ComponentLifecycle {...this.state}/>
				<Button
					title='改变props'
					onPress={() => {
						this.setState({
							value: 'changed'
						})
					}}
				/>
			</View>
		)
	}
}

/**
 * 导出当前Module
 */
// module.exports = ComponentLifecycle;
module.exports = ComponentLifecycleWrapper;